<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="../../../../public/css/general.css">
    <link rel="stylesheet" href="../../../../public/css/mint-ui/lib/style.css">
    <link rel="stylesheet" href="../../../../public/css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../../../public/css/wechat/mine.css">
    <title>白蔬贞</title>
</head>
<body>
<div id="my-order">
    <div class="top-bar">
        <a href="javascript:;" @click="goBack()">
            <i class="iconfont">&#xe665;</i>
        </a>
        <span v-text="tip">我的订单</span>
    </div>
    <!--占位符-->
    <div class="placeholder"></div>

    <mt-navbar v-model="selected">
        <mt-tab-item id="1">全部</mt-tab-item>
        <mt-tab-item id="2">进行中</mt-tab-item>
        <mt-tab-item id="3">待付款</mt-tab-item>
        <mt-tab-item id="4">已收货</mt-tab-item>
        <mt-tab-item id="5">已取消</mt-tab-item>
    </mt-navbar>

    <!-- tab-container -->
    <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
            <div class="order-cell" v-for="order in orders" :key="order.orderNO">
                <div class="top">
                    <div class="title" v-text="order.date.substr(0,10)"></div>
                    <div class="content" v-text="'订单号：'+order.orderNO"></div>
                    <div class="footer"
                         :class="{'footer-g': order.orderState=='待收货' || order.orderState=='待分拣', 'footer-r': order.orderState=='待付款'}"
                         v-text="order.orderState"></div>
                </div>
                <div class="middle">
                    <div class="product" v-for="p in order.products">
                        <div class="title" v-text="p.name"></div>
                        <div class="footer">
                            <div class="title" v-text="'单价/单位'+p.unitPrice"></div>
                            <div class="content" v-text="'数量：'+p.num"></div>
                            <div class="footer" v-text="'小计：¥'+p.total"></div>
                        </div>
                    </div>
                </div>
                <div class="bottom" :class="{'bottom-w': order.orderState=='待收货'}">
                    <div class="title" v-text="'共计：¥'+order.total"></div>
                    <div class="content" v-text="order.orderPay"></div>
                    <div class="footer"
                         :class="{'footer-r': order.orderState=='待付款'}"
                         v-text="order.payState"></div>
                    <div class="clearfix"></div>
                    <div class="button">
                        <img @click="cancelOrder(order)" v-if="order.orderState=='待分拣' || order.orderState=='待付款'" src="../../../../public/images/order-cancel.png" alt="取消订单">
                        <img @click="pay()" class="order-pay" v-if="order.orderState=='待付款'" src="../../../../public/images/order-pay.png" alt="去支付">
                        <img @click="tooOrder(order)" v-if="order.orderState=='已收货' || order.orderState=='已取消'" src="../../../../public/images/order-too.png" alt="再来一单">
                    </div>
                </div>
            </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
            <div class="order-cell" v-for="order in getOrdersByType('2')" :key="order.orderNO">
                <div class="top">
                    <div class="title" v-text="order.date.substr(0,10)"></div>
                    <div class="content" v-text="'订单号：'+order.orderNO"></div>
                    <div class="footer"
                         :class="{'footer-g': order.orderState=='待收货' || order.orderState=='待分拣', 'footer-r': order.orderState=='待付款'}"
                         v-text="order.orderState"></div>
                </div>
                <div class="middle">
                    <div class="product" v-for="p in order.products">
                        <div class="title" v-text="p.name"></div>
                        <div class="footer">
                            <div class="title" v-text="'单价/单位'+p.unitPrice"></div>
                            <div class="content" v-text="'数量：'+p.num"></div>
                            <div class="footer" v-text="'小计：¥'+p.total"></div>
                        </div>
                    </div>
                </div>
                <div class="bottom" :class="{'bottom-w': order.orderState=='待收货'}">
                    <div class="title" v-text="'共计：¥'+order.total"></div>
                    <div class="content" v-text="order.orderPay"></div>
                    <div class="footer"
                         :class="{'footer-r': order.orderState=='待付款'}"
                         v-text="order.payState"></div>
                    <div class="clearfix"></div>
                    <div class="button">
                        <img @click="cancelOrder(order)" v-if="order.orderState=='待分拣' || order.orderState=='待付款'" src="../../../../public/images/order-cancel.png" alt="取消订单">
                        <img @click="pay()" class="order-pay" v-if="order.orderState=='待付款'" src="../../../../public/images/order-pay.png" alt="去支付">
                        <img @click="tooOrder(order)" v-if="order.orderState=='已收货' || order.orderState=='已取消'" src="../../../../public/images/order-too.png" alt="再来一单">
                    </div>
                </div>
            </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
            <div class="order-cell" v-for="order in getOrdersByType('3')" :key="order.orderNO">
                <div class="top">
                    <div class="title" v-text="order.date.substr(0,10)"></div>
                    <div class="content" v-text="'订单号：'+order.orderNO"></div>
                    <div class="footer"
                         :class="{'footer-g': order.orderState=='待收货' || order.orderState=='待分拣', 'footer-r': order.orderState=='待付款'}"
                         v-text="order.orderState"></div>
                </div>
                <div class="middle">
                    <div class="product" v-for="p in order.products">
                        <div class="title" v-text="p.name"></div>
                        <div class="footer">
                            <div class="title" v-text="'单价/单位'+p.unitPrice"></div>
                            <div class="content" v-text="'数量：'+p.num"></div>
                            <div class="footer" v-text="'小计：¥'+p.total"></div>
                        </div>
                    </div>
                </div>
                <div class="bottom" :class="{'bottom-w': order.orderState=='待收货'}">
                    <div class="title" v-text="'共计：¥'+order.total"></div>
                    <div class="content" v-text="order.orderPay"></div>
                    <div class="footer"
                         :class="{'footer-r': order.orderState=='待付款'}"
                         v-text="order.payState"></div>
                    <div class="clearfix"></div>
                    <div class="button">
                        <img @click="cancelOrder(order)" v-if="order.orderState=='待分拣' || order.orderState=='待付款'" src="../../../../public/images/order-cancel.png" alt="取消订单">
                        <img @click="pay()" class="order-pay" v-if="order.orderState=='待付款'" src="../../../../public/images/order-pay.png" alt="去支付">
                        <img @click="tooOrder(order)" v-if="order.orderState=='已收货' || order.orderState=='已取消'" src="../../../../public/images/order-too.png" alt="再来一单">
                    </div>
                </div>
            </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="4">
            <div class="order-cell" v-for="order in getOrdersByType('4')" :key="order.orderNO">
                <div class="top">
                    <div class="title" v-text="order.date.substr(0,10)"></div>
                    <div class="content" v-text="'订单号：'+order.orderNO"></div>
                    <div class="footer"
                         :class="{'footer-g': order.orderState=='待收货' || order.orderState=='待分拣', 'footer-r': order.orderState=='待付款'}"
                         v-text="order.orderState"></div>
                </div>
                <div class="middle">
                    <div class="product" v-for="p in order.products">
                        <div class="title" v-text="p.name"></div>
                        <div class="footer">
                            <div class="title" v-text="'单价/单位'+p.unitPrice"></div>
                            <div class="content" v-text="'数量：'+p.num"></div>
                            <div class="footer" v-text="'小计：¥'+p.total"></div>
                        </div>
                    </div>
                </div>
                <div class="bottom" :class="{'bottom-w': order.orderState=='待收货'}">
                    <div class="title" v-text="'共计：¥'+order.total"></div>
                    <div class="content" v-text="order.orderPay"></div>
                    <div class="footer"
                         :class="{'footer-r': order.orderState=='待付款'}"
                         v-text="order.payState"></div>
                    <div class="clearfix"></div>
                    <div class="button">
                        <img @click="cancelOrder(order)" v-if="order.orderState=='待分拣' || order.orderState=='待付款'" src="../../../../public/images/order-cancel.png" alt="取消订单">
                        <img @click="pay()" class="order-pay" v-if="order.orderState=='待付款'" src="../../../../public/images/order-pay.png" alt="去支付">
                        <img @click="tooOrder(order)" v-if="order.orderState=='已收货' || order.orderState=='已取消'" src="../../../../public/images/order-too.png" alt="再来一单">
                    </div>
                </div>
            </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="5">
            <div class="order-cell" v-for="order in getOrdersByType('5')" :key="order.orderNO">
                <div class="top">
                    <div class="title" v-text="order.date.substr(0,10)"></div>
                    <div class="content" v-text="'订单号：'+order.orderNO"></div>
                    <div class="footer"
                         :class="{'footer-g': order.orderState=='待收货' || order.orderState=='待分拣', 'footer-r': order.orderState=='待付款'}"
                         v-text="order.orderState"></div>
                </div>
                <div class="middle">
                    <div class="product" v-for="p in order.products">
                        <div class="title" v-text="p.name"></div>
                        <div class="footer">
                            <div class="title" v-text="'单价/单位'+p.unitPrice"></div>
                            <div class="content" v-text="'数量：'+p.num"></div>
                            <div class="footer" v-text="'小计：¥'+p.total"></div>
                        </div>
                    </div>
                </div>
                <div class="bottom" :class="{'bottom-w': order.orderState=='待收货'}">
                    <div class="title" v-text="'共计：¥'+order.total"></div>
                    <div class="content" v-text="order.orderPay"></div>
                    <div class="footer"
                         :class="{'footer-r': order.orderState=='待付款'}"
                         v-text="order.payState"></div>
                    <div class="clearfix"></div>
                    <div class="button">
                        <img @click="cancelOrder(order)" v-if="order.orderState=='待分拣' || order.orderState=='待付款'" src="../../../../public/images/order-cancel.png" alt="取消订单">
                        <img @click="pay()" class="order-pay" v-if="order.orderState=='待付款'" src="../../../../public/images/order-pay.png" alt="去支付">
                        <img @click="tooOrder(order)" v-if="order.orderState=='已收货' || order.orderState=='已取消'" src="../../../../public/images/order-too.png" alt="再来一单">
                    </div>
                </div>
            </div>
        </mt-tab-container-item>
    </mt-tab-container>
</div>
<script src="../../../../public/js/vue.js"></script>
<script src="../../../../public/css/mint-ui/lib/index.js"></script>
<script src="../../../../public/js/store.js"></script>
<script src="../../../../public/js/DateFormat.js"></script>
<script src="../../../../public/js/wechat/mixin.js"></script>
<script src="../../../../public/js/wechat/mine/order.js"></script>
</body>
</html>